<script setup lang="ts">
const fn = () => {
  // 注册逻辑
  // 文章列表跳转逻辑
  // 该函数可以完全自己定义业务逻辑
  console.log('自己写的业务逻辑函数')
}
</script>

<template>
  <div class="playground-page">
    <!--
       为什么这个组件可以直接用 不需要import
       因为之前的自动加载插件，也会自动加载src/components下的组件
       它相当于帮你自动写了 import
     -->
    <!-- <cp-nav-bar
      title="帅峰标题"
      :right-text="'帅峰右侧文案'"
      @click-right="fn"
    ></cp-nav-bar> -->
    <cp-nav-bar
      title="sf-title"
      right-text="sf-right-text"
      @click-right="fn"
    ></cp-nav-bar>
    <h1>playground</h1>
    <p v-for="item in 100" :key="item">这里是p{{ item }}</p>
  </div>
</template>

<style scoped lang="scss">
.playground-page {
  padding-top: 50px;
}
</style>
